import React, {useState, useEffect, useLayoutEffect} from 'react'
// 使用useState来创建状态
// 1. 引入
// 2. 接收一个参数做为初始值
// 3. 返回一个数组，第一个值为状态，第二个为改变状态的函数

// useEffect
// 1. 接收一个函数作为参数
// 2. 接收第二个参数 依赖列表 只有依赖更新时，才会执行函数
// 3. 返回一个函数，先执行返回函数，在执行参数函数

// useLayoutEffect 与 useEffect 用法相似
// 不同点
// useEffect 执行时机在 render之后
// useLayoutEffect dom更新之后
function StateFunction() {
  const [num, setNum] = useState(1)

  useLayoutEffect(()=>{
    console.log("useLayoutEffect")
    document.body.addEventListener('ooo',()=>{
      console.log('add ooo')
    })
    return ()=>{
      document.body.removeEventListener('ooo',()=>{
        console.log('remove ooo')
      })
      console.log("useLayoutEffect销毁1")
    }
  },[num])

  useEffect(()=>{
    console.log("useEffect函数组件结束渲染2")
    document.body.addEventListener('ooo',()=>{
      console.log('add ooo')
    })
    return ()=>{
      document.body.removeEventListener('ooo',()=>{
        console.log('remove ooo')
      })
      console.log("useEffect销毁1")
    }
  },[num])
  return <div onClick={()=>{setNum(num=>num+1)}}>这是一个函数组件 - {num}</div>
}
export default StateFunction